import { PenMainProps } from "@/types";
import styles from "@/layout/Configuration/Configuration.module.scss";
import { deepClone } from "@meta2d/core";
let AlignBorderArr = [
  { title: "左对齐", className: "t-align-left", align: "left" },
  { title: "右对齐", className: "t-align-right", align: "right" },
  { title: "顶部对齐", className: "t-align-top", align: "top" },
  { title: "底部对齐", className: "t-align-bottom", align: "bottom" },
  { title: "垂直居中", className: "t-align-center", align: "center" },
  { title: "水平居中", className: "t-align-middle", align: "middle" },
  {
    title: "等距分布、左右对齐",
    className: "t-horizontal-between",
    align: "spaceBetween",
  },
  {
    title: "等距分布、上下对齐",
    className: "t-vertical-between",
    align: "spaceBetweenColumn",
  },
];

let AlignFirst = [
  ...AlignBorderArr.slice(0, 6),
  { title: "相同大小", className: "t-yiyang", align: "yiyang" },
  { title: "格式刷", className: "t-geshishua", align: "geshishua" },
];
export function AlignBorder(props: PenMainProps) {
  const handleAlignBorder = (item: {
    title?: string;
    className?: string;
    align: string;
  }) => {
    if (item.align == "spaceBetween") {
      window.meta2d.spaceBetween(props.activePens, 1000);
      return false;
    }
    if (item.align == "spaceBetweenColumn") {
      window.meta2d.spaceBetweenColumn(props.activePens, 1000);
      return false;
    }
    window.meta2d.alignNodes(item.align, props.activePens);
  };
  return (
    <div className={styles.alignIcon}>
      {AlignBorderArr.map((item, index) => {
        return (
          <i
            onClick={() => handleAlignBorder(item)}
            title={item.title}
            className={item.className + " t-icon"}
            key={"AlignPen" + index}
          ></i>
        );
      })}
    </div>
  );
}
export function AlignFirstPen(props: PenMainProps) {
  const handleAlignBorder = (item: {
    title?: string;
    className?: string;
    align: string;
  }) => {
    if (item.align == "yiyang") {
      let width = props.activePens[0].width;
      let height = props.activePens[0].height;
      props.activePens.forEach((penItem) => {
        window.meta2d.setValue({
          id: penItem.id,
          width,
          height,
        });
      });
    }
    if (item.align == "geshishua") {
      let {
        width,
        height,
        lineName,
        rotate,
        visible,
        locked,
        lineWidth,
        globalAlpha,
        lineDash,
        color,
        background,
        activeColor,
        activeBackground,
        hoverColor,
        hoverBackground,
        anchorColor,
        textColor,
        bkType,
        gradientFromColor,
        gradientToColor,
        gradientAngle,
        gradientRadius,
        strokeType,
        lineGradientFromColor,
        lineGradientToColor,
        lineGradientAngle,
        shadowColor,
        shadowOffsetY,
        shadowOffsetX,
        shadowBlur,
        hoverTextColor,
        activeTextColor,
        fontFamily,
        fontSize,
        lineHeight,
        fontStyle,
        fontWeight,
        textAlign,
        textBackground,
      } = deepClone(props.activePens[0]);
      props.activePens.forEach((penItem) => {
        window.meta2d.setValue({
          id: penItem.id,
          width,
          height,
          lineName,
          rotate,
          visible,
          locked,
          lineWidth,
          globalAlpha,
          lineDash,
          color,
          background,
          activeColor,
          activeBackground,
          hoverColor,
          hoverBackground,
          anchorColor,
          textColor,
          bkType,
          gradientFromColor,
          gradientToColor,
          gradientAngle,
          gradientRadius,
          strokeType,
          lineGradientFromColor,
          lineGradientToColor,
          lineGradientAngle,
          shadowColor,
          shadowOffsetY,
          shadowOffsetX,
          shadowBlur,
          hoverTextColor,
          activeTextColor,
          fontFamily,
          fontSize,
          lineHeight,
          fontStyle,
          fontWeight,
          textAlign,
          textBackground,
        });
      });
    }
    window.meta2d.alignNodesByFirst(item.align, props.activePens);
  };
  return (
    <div className={styles.alignIcon}>
      {AlignFirst.map((item, index) => {
        return (
          <i
            onClick={() => handleAlignBorder(item)}
            title={item.title}
            className={item.className + " t-icon"}
            key={"AlignFirst" + index}
          ></i>
        );
      })}
    </div>
  );
}
